<template>
    <ClientOnly>
        <el-menu 
            :default-active="activeIndex" 
            mode="horizontal" 
            @select="handleSelect"
            :ellipsis="false"
            style="padding-left: 20px; padding-right: 200px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);">

            <div class="flex-middle">
                <img style="height: 50px;" src="https://varitall.oss-cn-beijing.aliyuncs.com/icon/varitall-1.png" />
            </div>

            <div class="flex-grow" ></div>

            <el-menu-item index="1" to="/interview">
                <el-icon><MagicStick /></el-icon>
                <span>面试八股</span>
            </el-menu-item>

            <el-menu-item index="2">
                <el-icon><ScaleToOriginal /></el-icon>
                <span>项目实践</span>
            </el-menu-item>

            <el-menu-item index="3">
                <el-icon><Opportunity /></el-icon>
                <span>ACM/ICPC</span>
            </el-menu-item>

            <el-sub-menu index="4">
                <template #title>
                    <el-icon><Setting /></el-icon>
                    <span>其他</span>
                </template>
                <el-menu-item index="3-1">
                    <span>关于作者</span>
                </el-menu-item>
                <el-menu-item index="3-2">
                    <span>社群</span>
                </el-menu-item>
            </el-sub-menu>

            <el-dropdown size="large">
                <div class="flex-middle" style="margin-left: 20px;">
                    <el-avatar :size="40" @click="clickAvatar"
                        src="https://q2.qlogo.cn/headimg_dl?dst_uin=767055299@qq.com&spec=640" />
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <div>
                                <span @click="logout" style="caret-color: transparent;">退出</span>
                            </div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-menu>
    </ClientOnly>
</template>

<script setup>
import { ref } from 'vue'

const activeIndex = ref('1')

const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
}

const clickAvatar = () => {
    alert(111);
}

const logout = () => {
    alert('logout');
}
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
}

.el-menu {
    padding-top: 10px;
    padding-bottom: 10px;
}

.el-menu-item {
    padding-right: 25px;
}

.el-avatar:hover {
    background-color: #2980B9;
}
</style>